<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件管理系统</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
    <style>
        .file-card {
            transition: transform 0.2s;
        }
        .file-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }
        .upload-area {
            border: 2px dashed #ccc;
            border-radius: 10px;
            padding: 20px;
            text-align: center;
            background-color: #f8f9fa;
            cursor: pointer;
        }
        .upload-area:hover {
            border-color: #007bff;
            background-color: #f0f8ff;
        }
    </style>
</head>
<body>
    <div class="container py-5">
        <h1 class="text-center mb-5">文件管理系统</h1>
        
        <div class="alert alert-success" role="alert" th:if="${message}" th:text="${message}"></div>
        
        <div class="row mb-5">
            <div class="col-md-8 offset-md-2">
                <div class="card">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0">上传文件</h5>
                    </div>
                    <div class="card-body">
                        <form method="POST" enctype="multipart/form-data" action="/upload" class="mb-0">
                            <div class="mb-3">
                                <div class="upload-area" id="drop-area">
                                    <p>拖放文件到这里或点击选择文件</p>
                                    <input class="form-control" type="file" name="file" id="fileInput" style="display: none;">
                                    <button type="button" class="btn btn-outline-primary" id="browseButton">浏览文件</button>
                                </div>
                                <div id="file-info" class="mt-2" style="display:none;">
                                    <span id="file-name"></span>
                                    <button type="button" class="btn btn-sm btn-danger" id="remove-file">移除</button>
                                </div>
                            </div>
                            <div class="text-center">
                                <button class="btn btn-primary px-5" type="submit">上传</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        
        <h2 class="mb-4">文件列表</h2>
        
        <div class="row" th:if="${not #lists.isEmpty(files)}">
            <div class="col-md-4 mb-4" th:each="file : ${files}">
                <div class="card h-100 file-card">
                    <div class="card-header">
                        <h5 class="card-title text-truncate mb-0" th:text="${file.originalFileName}"></h5>
                    </div>
                    <div class="card-body">
                        <p class="card-text">
                            <strong>大小：</strong>
                            <span th:text="${#numbers.formatDecimal(file.fileSize / 1024, 0, 2) + ' KB'}"></span>
                        </p>
                        <p class="card-text">
                            <strong>类型：</strong>
                            <span th:text="${file.fileType}"></span>
                        </p>
                        <p class="card-text">
                            <strong>上传时间：</strong>
                            <span th:text="${#dates.format(file.uploadTime, 'yyyy-MM-dd HH:mm')}"></span>
                        </p>
                    </div>
                    <div class="card-footer bg-white">
                        <div class="d-flex justify-content-between">
                            <a th:href="@{/download/{id}(id=${file.id})}" class="btn btn-sm btn-primary">
                                <i class="bi bi-download"></i> 下载
                            </a>
                            <a th:href="@{/process/{id}(id=${file.id})}" class="btn btn-sm btn-warning">
                                <i class="bi bi-gear"></i> 处理
                            </a>
                            <form th:action="@{/delete/{id}(id=${file.id})}" method="post">
                                <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('确定要删除这个文件吗？')">
                                    <i class="bi bi-trash"></i> 删除
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="alert alert-info" th:if="${#lists.isEmpty(files)}">
            <p class="mb-0">没有文件。上传一些文件吧！</p>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const dropArea = document.getElementById('drop-area');
            const fileInput = document.getElementById('fileInput');
            const browseButton = document.getElementById('browseButton');
            const fileInfo = document.getElementById('file-info');
            const fileName = document.getElementById('file-name');
            const removeFile = document.getElementById('remove-file');
            
            // 点击浏览按钮触发文件选择
            browseButton.addEventListener('click', function() {
                fileInput.click();
            });
            
            // 点击上传区域触发文件选择
            dropArea.addEventListener('click', function(e) {
                if (e.target !== browseButton) {
                    fileInput.click();
                }
            });
            
            // 拖放功能
            ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
                dropArea.addEventListener(eventName, preventDefaults, false);
            });
            
            function preventDefaults(e) {
                e.preventDefault();
                e.stopPropagation();
            }
            
            ['dragenter', 'dragover'].forEach(eventName => {
                dropArea.addEventListener(eventName, highlight, false);
            });
            
            ['dragleave', 'drop'].forEach(eventName => {
                dropArea.addEventListener(eventName, unhighlight, false);
            });
            
            function highlight() {
                dropArea.classList.add('border-primary');
                dropArea.classList.add('bg-light');
            }
            
            function unhighlight() {
                dropArea.classList.remove('border-primary');
                dropArea.classList.remove('bg-light');
            }
            
            dropArea.addEventListener('drop', handleDrop, false);
            
            function handleDrop(e) {
                const dt = e.dataTransfer;
                const files = dt.files;
                
                if (files.length > 0) {
                    fileInput.files = files;
                    updateFileInfo();
                }
            }
            
            // 文件选择事件
            fileInput.addEventListener('change', updateFileInfo);
            
            function updateFileInfo() {
                if (fileInput.files.length > 0) {
                    fileName.textContent = fileInput.files[0].name;
                    fileInfo.style.display = 'block';
                } else {
                    fileInfo.style.display = 'none';
                }
            }
            
            // 移除选择的文件
            removeFile.addEventListener('click', function() {
                fileInput.value = '';
                fileInfo.style.display = 'none';
            });
        });
    </script>
</body>
</html> 